<template>
<div>
    <Form
      ref="formUserValidate"
      :label-width="80"
      :rules="ruleValidate"
      :model="formData"
    >
      <Row>
        <Col span="8">
        <FormItem
          label="账号:"
          prop="userName"
        >
          <Input  :readonly="userNameReadonly"  v-model="formData.userName" placeholder="账号"></Input>
        </FormItem>
        </Col>
        <Col span="8">
        <FormItem
          label="初始密码:"
          prop="sPassword"
        >
          <Input type="password"  placeholder="初始密码" v-model="formData.sPassword"></Input>
        </FormItem>
        </Col>
        <Col span="8">
        <FormItem
          label="姓名:"
          prop="name"
        >
          <Input v-model="formData.name" placeholder="姓名"></Input>
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="8">
        <FormItem
          label="机构:"
          prop="organization"
        >
          <Input v-model="formData.organization" placeholder="机构"></Input>
        </FormItem>
        </Col>
        <Col span="8">
        <FormItem
          label="岗位:"
          prop="post"
        >
          <Input  v-model="formData.post" placeholder="岗位"></Input>
        </FormItem>
        </Col>
        <Col span="8">
        <FormItem
          label="状态:"
          prop="status"
        >
          <Select filterable  v-model="formData.status">
            <Option
              v-for="( item, index ) in $store.getters.dictionaryKey('userStatus')"
              :value="item.value"
              :key="`${index}-${item.value}`"
            >{{item.text}}</Option>
          </Select>
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="8">
        <FormItem
          label="性别:"
          prop="sex"
        >
          <Select
            filterable
            v-model="formData.sex"
          >
            <Option
              v-for="( item, index ) in $store.getters.dictionaryKey('sex')"
              selected
              :value="item.value"
              :key="`${index}-${item.value}`"
            >{{item.text}}</Option>
          </Select>
        </FormItem>
        </Col>
        <Col span="8">
        <FormItem
          label="邮箱:"
          prop="email"
        >
          <Input  v-model="formData.email" placeholder="邮箱"></Input>
        </FormItem>
        </Col>
        <Col span="8">
        <FormItem
          label="生日:"
          prop="birthday"
        >
          <DatePicker  v-model="formData.birthday"
            type="date"
            format="yyyy-MM-dd"
            placeholder="生日"
            style="width: 100%"
            :editable="dateEditable"
          ></DatePicker>
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="8">
        <FormItem
          label="联系方式:"
          prop="telephone"
        >
          <Input v-model="formData.telephone" placeholder="联系方式"></Input>
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="24">
        <FormItem
          label="备注:"
          prop="description"
        >
          <Input  v-model="formData.description"  type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="备注"></Input>
        </FormItem>
        </Col>
      </Row>
      <Row class="from-footer-button">
        <Button type="warning" @click="$emit('onCloneModal')">返回</Button>
        <Button type="info" @click="editKeep()">保存</Button>
      </Row>
    </Form>
</div>
</template>

<script>
import md5 from 'md5'
import moment from 'moment'
import { getUserREQ, saveUserREQ, updateUserREQ } from '@/api/user'
export default {
  name: 'basic_user_edit',
  data () {
    return {
      userNameReadonly: false,
      dateEditable: false,
      formData: {
        password: '',
        id: '',
        sPassword: '',
        userName: '',
        sex: 'MALE',
        name: '',
        organization: '',
        post: '',
        status: 'NORMAL',
        email: '',
        birthday: new Date(),
        telephone: '',
        description: ''
      }
    }
  },
  methods: {
    editKeep () {
      this.$refs.formUserValidate.validate((valid) => {
        if (valid) {
          let tempFormUser = Object.assign({}, this.formData)
          delete tempFormUser.sPassword
          if (this.formData.sPassword) {
            tempFormUser.password = md5(this.formData.sPassword)
          }
          tempFormUser.birthday = moment(this.formData.birthday).format('YYYY-MM-DD')
          const pare = JSON.stringify(tempFormUser)
          if (!this.formData.id) { this.saveUser(pare) } else { this.updateUser(pare) }
        }
      })
    },
    loadPage (id = '') {
      this.formData.id = id
      this.$refs.formUserValidate.resetFields()
      if (this.formData.id) {
        this.userNameReadonly = true
        this.getUser(this.formData.id)
      } else {
        this.userNameReadonly = false
      }
    },
    saveUser (pare) {
      debugger
      saveUserREQ(pare).then(res => {
        this.$emit('onCloneModal')
      })
    },
    updateUser (pare) {
      updateUserREQ(pare).then(res => {
        this.$emit('onCloneModal')
      })
    },
    getUser (id) {
      if (id) {
        getUserREQ(id).then((res) => {
          if (res) { this.formData = Object.assign(this.formData, res) }
        })
      }
    }
  },
  computed: {
    ruleValidate () {
      let validate = {
        userName: [
          { required: true, message: '账号不能为空', trigger: 'blur' },
          { type: 'string', min: 2, max: 10, message: '帐号长度必须是2~10字符', trigger: 'blur' }
        ],
        sPassword: [{ type: 'string', min: 6, max: 20, message: '初始密码必须是6~20个字符', trigger: 'blur' }],
        name: [
          { required: true, message: '用户名不能为空', trigger: 'blur' },
          { type: 'string', min: 2, max: 20, message: '用户名长度必须是2~20字符', trigger: 'blur' }
        ],
        status: [
          { required: true, message: '状态不能为空', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '性别不能为空', trigger: 'blur' }
        ],
        email: [
          { type: 'email', message: '邮箱格式不正确', trigger: 'blur' }
        ],
        birthday: [
          { required: false, type: 'date', message: '日期格式不正确', trigger: 'blur' }
        ],
        telephone: [
          { pattern: /^[0-9]*$/, message: '电话号码格式不正确', trigger: 'blur' },
          { max: 11, message: '联系电话不能大于11个字符', trigger: 'blur' }
        ],
        description: [
          { max: 150, message: '备注不不能大于150个字符', trigger: 'blur' }
        ]
      }
      if (!this.formData.id) {
        validate.sPassword.push({ required: true, message: '初始密码不能为空！', trigger: 'blur' })
      }
      return validate
    }
  }
}
</script>
<style scoped lang="less">
</style>
